<!DOCTYPE html>
<html lang="en-US">



<body class="theme-mode-light">
<div id="app" data-server-rendered="true">
    <div class="theme-container sidebar-open have-rightmenu">
        <header class="navbar blur">
            <div title="目录" class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img"
                                                        viewBox="0 0 448 512" class="icon">
                <path fill="currentColor"
                      d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z">
                </path>
            </svg></div> <a href="/" class="home-link router-link-active"><img src="https://static.iocoder.cn/ruoyi-vue-pro-logo.png" alt="ruoyi-vue-pro 开发指南" class="logo">
            <span class="site-name can-hide">ruoyi-vue-pro 开发指南</span></a>
            <div class="links">
                <div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value="">
                    <!---->
                </div>
                <nav class="nav-links can-hide">
                    <div class="nav-item">
                        <div class="dropdown-wrapper">
                            <button type="button" aria-label="开发指南" class="dropdown-title"><a href="/intro/" class="link-title">开发指南</a> <span class="title" style="display:none;">开发指南</span> <span class="arrow right"></span></button>
                            <ul class="nav-dropdown" style="display:none;">
                                <li class="dropdown-item">
                                    <!----> <a href="/intro/" class="nav-link">萌新必读</a>
                                </li>
                                <li class="dropdown-item">
                                    <!----> <a href="/module-new/" class="nav-link">后端手册</a>
                                </li>
                                <li class="dropdown-item">
                                    <!----> <a href="/bpm/" class="nav-link">工作流手册</a>
                                </li>
                                <li class="dropdown-item">
                                    <!----> <a href="/report/" class="nav-link">大屏手册</a>
                                </li>
                                <li class="dropdown-item">
                                    <!----> <a href="/pay/build/" class="nav-link">支付手册</a>
                                </li>
                                <li class="dropdown-item">
                                    <!----> <a href="/mp/build/" class="nav-link">公众号手册</a>
                                </li>
                                <li class="dropdown-item">
                                    <!----> <a href="/mall/build/" class="nav-link">商城手册</a>
                                </li>
                                <li class="dropdown-item">
                                    <!----> <a href="/dev-env/" class="nav-link">运维手册</a>
                                </li>
                                <li class="dropdown-item">
                                    <!----> <a href="/vue2/dev-spec/" class="nav-link">前端手册 Vue 2.x</a>
                                </li>
                                <li class="dropdown-item">
                                    <!----> <a href="/vue3/dev-spec/" class="nav-link">前端手册 Vue 3.x</a>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div class="nav-item"><a href="/video/" class="nav-link">视频教程</a></div>
                    <div class="nav-item">
                        <div class="dropdown-wrapper">
                            <button type="button" aria-label="在线体验" class="dropdown-title"><!----> <span class="title" style="display:;">在线体验</span> <span class="arrow right"></span></button>
                            <ul class="nav-dropdown" style="display:none;">
                                <li class="dropdown-item">
                                    <!----> <a href="http://dashboard-vue3.yudao.iocoder.cn/" target="_blank" rel="noopener noreferrer"
                                               class="nav-link external">
                                    Vue3 + element-plus
                                    <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>
                                </li>
                                <li class="dropdown-item">
                                    <!----> <a href="http://dashboard-vben.yudao.iocoder.cn/" target="_blank" rel="noopener noreferrer"
                                               class="nav-link external">
                                    Vue3 + vben(ant-design-vue)
                                    <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>
                                </li>
                                <li class="dropdown-item">
                                    <!----> <a href="http://dashboard.yudao.iocoder.cn/" target="_blank" rel="noopener noreferrer"
                                               class="nav-link external">
                                    Vue2 + element-ui
                                    <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div class="nav-item"><a href="https://github.com/YunaiV/yudao-cloud" target="_blank"
                                             rel="noopener noreferrer" class="nav-link external">
                        微服务版
                        <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>
                    </div>
                    <div class="nav-item"><a href="https://www.iocoder.cn/" target="_blank" rel="noopener noreferrer"
                                             class="nav-link external">
                        作者博客
                        <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>
                    </div> <a href="https://github.com/YunaiV/ruoyi-vue-pro" target="_blank" rel="noopener noreferrer"
                              class="repo-link">
                    GitHub
                    <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>
                </nav>
            </div>
        </header>
        <div class="sidebar-mask"></div>
        <div class="sidebar-hover-trigger"></div>
        <aside class="sidebar" style="display:none;">
            <!---->
            <nav class="nav-links">
                <div class="nav-item">
                    <div class="dropdown-wrapper">
                        <button type="button" aria-label="开发指南" class="dropdown-title"><a href="/intro/" class="link-title">开发指南</a> <span class="title" style="display:none;">开发指南</span> <span class="arrow right"></span></button>
                        <ul class="nav-dropdown" style="display:none;">
                            <li class="dropdown-item">
                                <!----> <a href="/intro/" class="nav-link">萌新必读</a>
                            </li>
                            <li class="dropdown-item">
                                <!----> <a href="/module-new/" class="nav-link">后端手册</a>
                            </li>
                            <li class="dropdown-item">
                                <!----> <a href="/bpm/" class="nav-link">工作流手册</a>
                            </li>
                            <li class="dropdown-item">
                                <!----> <a href="/report/" class="nav-link">大屏手册</a>
                            </li>
                            <li class="dropdown-item">
                                <!----> <a href="/pay/build/" class="nav-link">支付手册</a>
                            </li>
                            <li class="dropdown-item">
                                <!----> <a href="/mp/build/" class="nav-link">公众号手册</a>
                            </li>
                            <li class="dropdown-item">
                                <!----> <a href="/mall/build/" class="nav-link">商城手册</a>
                            </li>
                            <li class="dropdown-item">
                                <!----> <a href="/dev-env/" class="nav-link">运维手册</a>
                            </li>
                            <li class="dropdown-item">
                                <!----> <a href="/vue2/dev-spec/" class="nav-link">前端手册 Vue 2.x</a>
                            </li>
                            <li class="dropdown-item">
                                <!----> <a href="/vue3/dev-spec/" class="nav-link">前端手册 Vue 3.x</a>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="nav-item"><a href="/video/" class="nav-link">视频教程</a></div>
                <div class="nav-item">
                    <div class="dropdown-wrapper">
                        <button type="button" aria-label="在线体验" class="dropdown-title"><!----> <span class="title" style="display:;">在线体验</span> <span class="arrow right"></span></button>
                        <ul class="nav-dropdown" style="display:none;">
                            <li class="dropdown-item">
                                <!----> <a href="http://dashboard-vue3.yudao.iocoder.cn/" target="_blank" rel="noopener noreferrer"
                                           class="nav-link external">
                                Vue3 + element-plus
                                <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>
                            </li>
                            <li class="dropdown-item">
                                <!----> <a href="http://dashboard-vben.yudao.iocoder.cn/" target="_blank" rel="noopener noreferrer"
                                           class="nav-link external">
                                Vue3 + vben(ant-design-vue)
                                <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>
                            </li>
                            <li class="dropdown-item">
                                <!----> <a href="http://dashboard.yudao.iocoder.cn/" target="_blank" rel="noopener noreferrer"
                                           class="nav-link external">
                                Vue2 + element-ui
                                <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="nav-item"><a href="https://github.com/YunaiV/yudao-cloud" target="_blank"
                                         rel="noopener noreferrer" class="nav-link external">
                    微服务版
                    <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>
                </div>
                <div class="nav-item"><a href="https://www.iocoder.cn/" target="_blank" rel="noopener noreferrer"
                                         class="nav-link external">
                    作者博客
                    <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>
                </div> <a href="https://github.com/YunaiV/ruoyi-vue-pro" target="_blank" rel="noopener noreferrer"
                          class="repo-link">
                GitHub
                <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>
            </nav>
            <ul class="sidebar-links">
                <li>
                    <section class="sidebar-group depth-0">
                        <p class="sidebar-heading open"><span>萌新必读</span>
                            <!---->
                        </p>
                        <ul class="sidebar-links sidebar-group-items">
                            <li><a href="/intro/" class="sidebar-link">简介</a></li>
                            <li><a href="/qun/" class="sidebar-link">交流群</a></li>
                            <li><a href="/video/" class="sidebar-link">视频教程</a></li>
                            <li><a href="/feature/" class="sidebar-link">功能列表</a></li>
                            <li><a href="/quick-start/" class="sidebar-link">快速启动（适合“后端”工程师）</a></li>
                            <li><a href="/quick-start-front/" aria-current="page" class="active sidebar-link">快速启动（适合“前端”工程师）</a>
                                <ul class="sidebar-sub-headers">
                                    <li class="sidebar-sub-header level2"><a href="/quick-start-front/#👍-相关视频教程"
                                                                             class="sidebar-link">👍 相关视频教程</a></li>
                                    <li class="sidebar-sub-header level2"><a href="/quick-start-front/#_1-apifox-接口工具"
                                                                             class="sidebar-link">1. Apifox 接口工具</a></li>
                                    <li class="sidebar-sub-header level2"><a href="/quick-start-front/#_2-启动-vue3-element-plus-管理后台"
                                                                             class="sidebar-link">2. 启动 Vue3 + element-plus 管理后台</a></li>
                                    <li class="sidebar-sub-header level2"><a
                                            href="/quick-start-front/#_3-启动-vue3-vben-ant-design-vue-管理后台" class="sidebar-link">3. 启动 Vue3 +
                                        vben(ant-design-vue) 管理后台</a></li>
                                    <li class="sidebar-sub-header level2"><a href="/quick-start-front/#_4-启动-vue2-管理后台"
                                                                             class="sidebar-link">4. 启动 Vue2 管理后台</a></li>
                                    <li class="sidebar-sub-header level2"><a href="/quick-start-front/#_5-启动-uni-app-管理后台"
                                                                             class="sidebar-link">5. 启动 uni-app 管理后台</a></li>
                                    <li class="sidebar-sub-header level2"><a href="/quick-start-front/#_6-启动-uni-app-用户前台"
                                                                             class="sidebar-link">6. 启动 uni-app 用户前台</a></li>
                                    <li class="sidebar-sub-header level2"><a href="/quick-start-front/#_7-参与项目" class="sidebar-link">7.
                                        参与项目</a></li>
                                </ul>
                            </li>
                            <li><a href="/api-doc/" class="sidebar-link">接口文档</a></li>
                            <li><a href="/technology/" class="sidebar-link">技术选型</a></li>
                            <li><a href="/project-intro/" class="sidebar-link">项目结构</a></li>
                            <li><a href="/dev-hot-swap/" class="sidebar-link">代码热加载</a></li>
                            <li><a href="/project-rename/" class="sidebar-link">一键改包</a></li>
                            <li><a href="/delete-code/" class="sidebar-link">删除功能</a></li>
                            <li><a href="/natapp/" class="sidebar-link">内网穿透</a></li>
                        </ul>
                    </section>
                </li>
                <li>
                    <section class="sidebar-group depth-0">
                        <p class="sidebar-heading"><span>后端手册</span>
                            <!---->
                        </p>
                        <ul class="sidebar-links sidebar-group-items">
                            <li><a href="/module-new/" class="sidebar-link">新建模块</a></li>
                            <li><a href="/new-feature/" class="sidebar-link">代码生成（新增功能）</a></li>
                            <li><a href="/resource-permission/" class="sidebar-link">功能权限</a></li>
                            <li><a href="/data-permission/" class="sidebar-link">数据权限</a></li>
                            <li><a href="/user-center/" class="sidebar-link">用户体系</a></li>
                            <li><a href="/social-user/" class="sidebar-link">三方登录</a></li>
                            <li><a href="/oauth2/" class="sidebar-link">OAuth 2.0（SSO 单点登录)</a></li>
                            <li><a href="/saas-tenant/" class="sidebar-link">SaaS 多租户【字段隔离】</a></li>
                            <li><a href="/saas-tenant/dynamic/" class="sidebar-link">SaaS 多租户【数据库隔离】</a></li>
                            <li><a href="/exception/" class="sidebar-link">异常处理（错误码）</a></li>
                            <li><a href="/validator/" class="sidebar-link">参数校验</a></li>
                            <li><a href="/page-feature/" class="sidebar-link">分页实现</a></li>
                            <li><a href="/file/" class="sidebar-link">文件存储（上传下载）</a></li>
                            <li><a href="/excel-import-and-export/" class="sidebar-link">Excel 导入导出</a></li>
                            <li><a href="/system-log/" class="sidebar-link">系统日志</a></li>
                            <li><a href="/mybatis/" class="sidebar-link">数据库 MyBatis</a></li>
                            <li><a href="/dynamic-datasource/" class="sidebar-link">多数据源（读写分离）</a></li>
                            <li><a href="/redis-cache/" class="sidebar-link">Redis 缓存</a></li>
                            <li><a href="/local-cache/" class="sidebar-link">本地缓存</a></li>
                            <li><a href="/job/" class="sidebar-link">定时任务</a></li>
                            <li><a href="/async-task/" class="sidebar-link">异步任务</a></li>
                            <li><a href="/message-queue/" class="sidebar-link">消息队列</a></li>
                            <li><a href="/config-center/" class="sidebar-link">配置管理</a></li>
                            <li><a href="/util/" class="sidebar-link">工具类 Util</a></li>
                            <li><a href="/unit-test/" class="sidebar-link">单元测试</a></li>
                            <li><a href="/distributed-lock/" class="sidebar-link">分布式锁</a></li>
                            <li><a href="/idempotent/" class="sidebar-link">幂等性（防重复提交）</a></li>
                            <li><a href="/server-protection/" class="sidebar-link">限流熔断</a></li>
                            <li><a href="/db-doc/" class="sidebar-link">数据库文档</a></li>
                            <li><a href="/sms/" class="sidebar-link">短信配置</a></li>
                            <li><a href="/mail/" class="sidebar-link">邮件配置</a></li>
                            <li><a href="/notify/" class="sidebar-link">站内信配置</a></li>
                            <li><a href="/desensitize/" class="sidebar-link">数据脱敏</a></li>
                            <li><a href="/sensitive-word/" class="sidebar-link">敏感词</a></li>
                            <li><a href="/captcha/" class="sidebar-link">验证码</a></li>
                            <li><a href="/area-and-ip/" class="sidebar-link">地区 &amp; IP 库</a></li>
                        </ul>
                    </section>
                </li>
                <li>
                    <section class="sidebar-group depth-0">
                        <p class="sidebar-heading"><span>工作流手册</span>
                            <!---->
                        </p>
                        <ul class="sidebar-links sidebar-group-items">
                            <li><a href="/bpm/" class="sidebar-link">工作流（Flowable）会签、或签</a></li>
                        </ul>
                    </section>
                </li>
                <li>
                    <section class="sidebar-group depth-0">
                        <p class="sidebar-heading"><span>大屏手册</span>
                            <!---->
                        </p>
                        <ul class="sidebar-links sidebar-group-items">
                            <li><a href="/report/" class="sidebar-link">报表设计器</a></li>
                            <li><a href="/report/screen/" class="sidebar-link">大屏设计器</a></li>
                        </ul>
                    </section>
                </li>
                <li>
                    <section class="sidebar-group depth-0">
                        <p class="sidebar-heading"><span>支付手册</span>
                            <!---->
                        </p>
                        <ul class="sidebar-links sidebar-group-items">
                            <li><a href="/pay/build/" class="sidebar-link">功能开启</a></li>
                            <li><a href="/pay/alipay-pay-demo/" class="sidebar-link">支付宝支付接入</a></li>
                            <li><a href="/pay/wx-pub-pay-demo/" class="sidebar-link">微信公众号支付接入</a></li>
                            <li><a href="/pay/wx-lite-pay-demo/" class="sidebar-link">微信小程序支付接入</a></li>
                            <li><a href="/pay/refund-demo/" class="sidebar-link">支付宝、微信退款接入</a></li>
                        </ul>
                    </section>
                </li>
                <li>
                    <section class="sidebar-group depth-0">
                        <p class="sidebar-heading"><span>商城手册</span>
                            <!---->
                        </p>
                        <ul class="sidebar-links sidebar-group-items">
                            <li><a href="/mall/build/" class="sidebar-link">功能开启</a></li>
                        </ul>
                    </section>
                </li>
                <li>
                    <section class="sidebar-group depth-0">
                        <p class="sidebar-heading"><span>公众号手册</span>
                            <!---->
                        </p>
                        <ul class="sidebar-links sidebar-group-items">
                            <li><a href="/mp/build/" class="sidebar-link">功能开启</a></li>
                            <li><a href="/mp/account/" class="sidebar-link">公众号接入</a></li>
                            <li><a href="/mp/user/" class="sidebar-link">公众号粉丝</a></li>
                            <li><a href="/mp/tag/" class="sidebar-link">公众号标签</a></li>
                            <li><a href="/mp/message/" class="sidebar-link">公众号消息</a></li>
                            <li><a href="/mp/auto-reply/" class="sidebar-link">自动回复</a></li>
                            <li><a href="/mp/menu/" class="sidebar-link">公众号菜单</a></li>
                            <li><a href="/mp/material/" class="sidebar-link">公众号素材</a></li>
                            <li><a href="/mp/article/" class="sidebar-link">公众号图文</a></li>
                            <li><a href="/mp/statistics/" class="sidebar-link">公众号统计</a></li>
                        </ul>
                    </section>
                </li>
                <li>
                    <section class="sidebar-group depth-0">
                        <p class="sidebar-heading"><span>运维手册</span>
                            <!---->
                        </p>
                        <ul class="sidebar-links sidebar-group-items">
                            <li><a href="/dev-env/" class="sidebar-link">开发环境</a></li>
                            <li><a href="/deployment-linux/" class="sidebar-link">Linux 部署</a></li>
                            <li><a href="/deployment-docker/" class="sidebar-link">Docker 部署</a></li>
                            <li><a href="/deployment-jenkins/" class="sidebar-link">Jenkins 部署</a></li>
                            <li><a href="/https/" class="sidebar-link">HTTPS 证书</a></li>
                            <li><a href="/server-monitor/" class="sidebar-link">服务监控</a></li>
                        </ul>
                    </section>
                </li>
                <li>
                    <section class="sidebar-group depth-0">
                        <p class="sidebar-heading"><span>前端手册 Vue 2</span>
                            <!---->
                        </p>
                        <ul class="sidebar-links sidebar-group-items">
                            <li><a href="/vue2/dev-spec/" class="sidebar-link">开发规范</a></li>
                            <li><a href="/vue2/route/" class="sidebar-link">菜单路由</a></li>
                            <li><a href="/vue2/icon/" class="sidebar-link">Icon 图标</a></li>
                            <li><a href="/vue2/dict/" class="sidebar-link">字典数据</a></li>
                            <li><a href="/vue2/components/" class="sidebar-link">系统组件</a></li>
                            <li><a href="/vue2/util/" class="sidebar-link">通用方法</a></li>
                            <li><a href="/vue2/config-center/" class="sidebar-link">配置读取</a></li>
                        </ul>
                    </section>
                </li>
                <li>
                    <section class="sidebar-group depth-0">
                        <p class="sidebar-heading"><span>前端手册 Vue 3</span>
                            <!---->
                        </p>
                        <ul class="sidebar-links sidebar-group-items">
                            <li><a href="/vue3/dev-spec/" class="sidebar-link">开发规范</a></li>
                            <li><a href="/vue3/route/" class="sidebar-link">菜单路由</a></li>
                            <li><a href="/vue3/icon/" class="sidebar-link">Icon 图标</a></li>
                            <li><a href="/vue3/dict/" class="sidebar-link">字典数据</a></li>
                            <li><a href="/vue3/components/" class="sidebar-link">系统组件</a></li>
                            <li><a href="/vue3/util/" class="sidebar-link">通用方法</a></li>
                            <li><a href="/vue3/config-center/" class="sidebar-link">配置读取</a></li>
                            <li><a href="/vue3/crud-schema/" class="sidebar-link">CRUD 组件</a></li>
                            <li><a href="/vue3/i18n/" class="sidebar-link">国际化</a></li>
                            <li><a href="/vue3/debugger/" class="sidebar-link">IDE 调试</a></li>
                        </ul>
                    </section>
                </li>
                <li>
                    <section class="sidebar-group depth-0">
                        <p class="sidebar-heading"><span>更新日志</span>
                            <!---->
                        </p>
                        <ul class="sidebar-links sidebar-group-items">
                            <li><a href="/changelog/1.8.1/" class="sidebar-link">【v1.8.1】2023-07-27</a></li>
                            <li><a href="/changelog/1.8.0/" class="sidebar-link">【v1.8.0】2023-07-27</a></li>
                            <li><a href="/changelog/1.7.3/" class="sidebar-link">【v1.7.3】2023-05-29</a></li>
                            <li><a href="/changelog/1.7.2/" class="sidebar-link">【v1.7.2】2023-04-19</a></li>
                            <li><a href="/changelog/1.7.1/" class="sidebar-link">【v1.7.1】2023-03-05</a></li>
                            <li><a href="/changelog/1.7.0/" class="sidebar-link">【v1.7.0】2023-01-30</a></li>
                            <li><a href="/changelog/1.6.6/" class="sidebar-link">【v1.6.6】2023-01-05</a></li>
                            <li><a href="/changelog/1.6.5/" class="sidebar-link">【v1.6.5】2022-12-01</a></li>
                            <li><a href="/changelog/1.6.4/" class="sidebar-link">【v1.6.4】2022-08-22</a></li>
                            <li><a href="/changelog/1.6.3/" class="sidebar-link">【v1.6.3】2022-07-29</a></li>
                            <li><a href="/changelog/1.6.2/" class="sidebar-link">【v1.6.2】2022-06-05</a></li>
                            <li><a href="/changelog/1.6.1/" class="sidebar-link">【v1.6.1】2022-03-21</a></li>
                            <li><a href="/changelog/1.6.0/" class="sidebar-link">【v1.6.0】2022-03-10</a></li>
                            <li><a href="/changelog/1.5.1/" class="sidebar-link">【v1.5.1】2022-02-28</a></li>
                            <li><a href="/changelog/1.5.0/" class="sidebar-link">【v1.5.0】2022-02-17</a></li>
                            <li><a href="/changelog/1.4.0/" class="sidebar-link">【v1.4.0】2022-02-04</a></li>
                            <li><a href="/changelog/1.3.0/" class="sidebar-link">【v1.3.0】2022.01.24</a></li>
                            <li><a href="/changelog/1.2.0/" class="sidebar-link">【v1.2.0】2021.12.15</a></li>
                            <li><a href="/changelog/1.1.0/" class="sidebar-link">【v1.1.0】2021.10.25</a></li>
                            <li><a href="/changelog/1.0.0/" class="sidebar-link">【v1.0.0】2021.05.03</a></li>
                        </ul>
                    </section>
                </li>
            </ul>
        </aside>
        <div>
            <main class="page">
                <div class="theme-vdoing-wrapper ">
                    <div class="articleInfo-wrap" data-v-0c557b5e>
                        <div class="articleInfo" data-v-0c557b5e>
                            <ul class="breadcrumbs" data-v-0c557b5e>
                                <li data-v-0c557b5e><a href="/" title="首页" class="iconfont icon-home router-link-active"
                                                       data-v-0c557b5e></a></li>
                                <li data-v-0c557b5e><span data-v-0c557b5e>开发指南</span></li>
                                <li data-v-0c557b5e><span data-v-0c557b5e>萌新必读</span></li>
                            </ul>
                            <div class="info" data-v-0c557b5e>
                                <div title="作者" class="author iconfont icon-touxiang" data-v-0c557b5e><a href="https://www.iocoder.cn"
                                                                                                         target="_blank" title="作者" class="beLink" data-v-0c557b5e>芋道源码</a></div>
                                <div title="创建时间" class="date iconfont icon-riqi" data-v-0c557b5e><a href="javascript:;"
                                                                                                     data-v-0c557b5e>2023-03-05</a></div>
                                <!---->
                            </div>
                        </div>
                    </div>
                    <!---->
                    <div class="content-wrapper">
                        <div class="right-menu-wrapper">
                            <div class="right-menu-margin">
                                <div class="right-menu-title">目录</div>
                                <div class="right-menu-content"></div>
                            </div>
                        </div>
                        <h1><img src="">快速启动（适合“前端”工程师）
                            <!---->
                        </h1>
                        <div class="theme-vdoing-content content__default">
                            <p>目标：在 <strong>本地</strong> 将前端项目运行起来，使用 <strong>远程</strong> 演示环境的后端服务。</p>
                            <p>整个过程非常简单，预计 5 分钟就可以完成，取决于大家的网速。</p>
                            <blockquote>
                                <p>↓↓↓ 技术交流群，一起苦练技术基本功，每日精进 30 公里！↓↓↓</p>
                            </blockquote>
                            <p><img src="/img/op/mp_tutou.png" alt="交流群"></p>
                            <div class="custom-block tip">
                                <p class="custom-block-title">友情提示：</p>
                                <p><strong>远程</strong> 演示环境的后端服务，只允许 <code>GET</code> 请求，不允许
                                    <code>POST</code>、<code>PUT</code>、<code>DELETE</code> 等请求。</p>
                                <p>如果你要完整的后端服务，建议后续参考 <a href="/quick-start">《快速启动（我是后端）》</a> 文档，将后端服务运行起来。</p>
                            </div>
                            <h2 id="👍-相关视频教程"><a href="#👍-相关视频教程" class="header-anchor">#</a> 👍 相关视频教程</h2>
                            <ul>
                                <li><a href="https://t.zsxq.com/07BeiEA6Q" target="_blank" rel="noopener noreferrer">从零开始 02：在 Windows
                                    环境下，如何运行前后端项目？<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>
                                </li>
                                <li><a href="https://t.zsxq.com/07FUNnYFm" target="_blank" rel="noopener noreferrer">从零开始 03：在 MacOS
                                    环境下，如何运行前后端项目？<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>
                                </li>
                            </ul>
                            <h2 id="_1-apifox-接口工具"><a href="#_1-apifox-接口工具" class="header-anchor">#</a> 1. Apifox 接口工具</h2>
                            <p>点击 <a href="http://mtw.so/5NZLsX" target="_blank"
                                     rel="noopener noreferrer">Apifox<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>
                                首页，下载对应的 Apifox 桌面版。如下图所示：</p>
                            <div class="custom-block tip">
                                <p class="custom-block-title">为什么要下载 Apifox 桌面版？</p>
                                <p>艿艿已经卸载 Postman，使用 Apifox 进行替代。国产软件，yyds 永远滴神！</p>
                                <p>国内很多互联网公司，包括百度、阿里、腾讯、字节跳动等等在内，都在使用 Apifox 作为 API 工具。</p>
                            </div>
                            <p><img src="/img/%E6%8E%A5%E5%8F%A3%E6%96%87%E6%A1%A3/01.png" alt="Apifox 下载"></p>
                            <p>解压后，双击进行安装即可。黑色界面，非常酷炫。</p>
                            <p><img src="/img/%E6%8E%A5%E5%8F%A3%E6%96%87%E6%A1%A3/02.png" alt="Apifox 界面"></p>
                            <div class="custom-block tip">
                                <p class="custom-block-title">接口文档？</p>
                                <p>阅读 <a href="/api-doc">《开发指南 —— 接口文档》</a> 呀~~</p>
                            </div>
                            <h2 id="_2-启动-vue3-element-plus-管理后台"><a href="#_2-启动-vue3-element-plus-管理后台"
                                                                     class="header-anchor">#</a> 2. 启动 Vue3 + element-plus 管理后台</h2>
                            <p><a href="https://github.com/yudaocode/yudao-ui-admin-vue3/" target="_blank"
                                  rel="noopener noreferrer"><code>yudao-ui-admin-vue3</code><span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>
                                是前端 Vue3 管理后台项目。</p>
                            <p>① 克隆 <a href="https://github.com/yudaocode/yudao-ui-admin-vue3.git" target="_blank"
                                       rel="noopener noreferrer">https://github.com/yudaocode/yudao-ui-admin-vue3.git<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>
                                项目，并 Star 关注下该项目。</p>
                            <p>② 在根目录执行如下命令，进行启动：</p>
                            <div class="language-bash extra-class">
                  <pre class="language-bash"><code><span class="token comment"># 安装 pnpm，提升依赖的安装速度</span>
<span class="token function">npm</span> config <span class="token builtin class-name">set</span> registry https://registry.npmjs.org
<span class="token function">npm</span> <span class="token function">install</span> -g <span class="token function">pnpm</span>
<span class="token comment"># 安装依赖</span>
<span class="token function">pnpm</span> <span class="token function">install</span>

<span class="token comment"># 启动服务</span>
<span class="token function">npm</span> run front
</code></pre>
                            </div>
                            <p>③ 启动完成后，浏览器会自动打开 <a href="http://localhost:80" target="_blank"
                                                   rel="noopener noreferrer">http://localhost:80<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>
                                地址，可以看到前端界面。</p>
                            <p><img src="https://static.iocoder.cn/images/Yudao/2022-09-04/yudao-admin-vue3-login.png?imageView2/2/format/webp/w/1280" alt="前端界面">
                            </p>
                            <div class="custom-block tip">
                                <p class="custom-block-title">友情提示：Vue3 使用 Vite 构建，所以它存在如下的情况，都是正常的：</p>
                                <ol>
                                    <li>项目启动很快，浏览器打开需要等待 1 分钟左右，请保持耐心。</li>
                                    <li>点击菜单，感觉会有一点卡顿，因为 Vite 采用懒加载机制。不用担心，最终部署到生产环境，就不存在这个问题了。</li>
                                </ol>
                                <p>详细说明，可见 <a href="https://juejin.cn/post/7129041114174062628" target="_blank"
                                              rel="noopener noreferrer">《为什么有人说 Vite 快，有人却说 Vite
                                    慢？》<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>
                                    文章。</p>
                            </div>
                            <h2 id="_3-启动-vue3-vben-ant-design-vue-管理后台"><a href="#_3-启动-vue3-vben-ant-design-vue-管理后台"
                                                                            class="header-anchor">#</a> 3. 启动 Vue3 + vben(ant-design-vue) 管理后台</h2>
                            <p><a href="https://github.com/yudaocode/yudao-ui-admin-vben/" target="_blank"
                                  rel="noopener noreferrer"><code>yudao-ui-admin-vue3</code><span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>
                                是前端 Vue3 + vben(ant-design-vue) 管理后台项目。</p>
                            <p>① 克隆 <a href="https://github.com/yudaocode/yudao-ui-admin-vben.git" target="_blank"
                                       rel="noopener noreferrer">https://github.com/yudaocode/yudao-ui-admin-vben.git<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>
                                项目，并 Star 关注下该项目。</p>
                            <p>② 在根目录执行如下命令，进行启动：</p>
                            <div class="language-bash extra-class">
                  <pre class="language-bash"><code><span class="token comment"># 安装 pnpm，提升依赖的安装速度</span>
<span class="token function">npm</span> config <span class="token builtin class-name">set</span> registry https://registry.npmjs.org
<span class="token function">npm</span> <span class="token function">install</span> -g <span class="token function">pnpm</span>
<span class="token comment"># 安装依赖</span>
<span class="token function">pnpm</span> <span class="token function">install</span>

<span class="token comment"># 启动服务</span>
<span class="token function">npm</span> run front
</code></pre>
                            </div>
                            <p>③ 启动完成后，浏览器会自动打开 <a href="http://localhost:80" target="_blank"
                                                   rel="noopener noreferrer">http://localhost:80<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>
                                地址，可以看到前端界面。</p>
                            <p><img src="/img/%E5%BF%AB%E9%80%9F%E5%90%AF%E5%8A%A8/%E5%89%8D%E7%AB%AF%E7%95%8C%E9%9D%A2-vben.png" alt="前端界面">
                            </p>
                            <h2 id="_4-启动-vue2-管理后台"><a href="#_4-启动-vue2-管理后台" class="header-anchor">#</a> 4. 启动 Vue2 管理后台</h2>
                            <p><a href="https://github.com/YunaiV/ruoyi-vue-pro/blob/master/yudao-ui-admin/" target="_blank"
                                  rel="noopener noreferrer"><code>yudao-ui-admin</code><span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>
                                是前端 Vue2 管理后台项目。</p>
                            <p>〇 克隆 <a href="https://github.com/YunaiV/ruoyi-vue-pro.git" target="_blank"
                                       rel="noopener noreferrer">https://github.com/YunaiV/ruoyi-vue-pro.git<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>
                                项目，并 Star 关注下该项目。</p>
                            <p>① 在 <code>yudao-ui-admin</code> 目录下，执行如下命令，进行启动：</p>
                            <div class="language-bash extra-class">
                  <pre class="language-bash"><code><span class="token comment"># 进入项目目录</span>
<span class="token builtin class-name">cd</span> yudao-ui-admin

<span class="token comment"># 安装 Yarn，提升依赖的安装速度</span>
<span class="token function">npm</span> <span class="token function">install</span> --global <span class="token function">yarn</span>
<span class="token comment"># 安装依赖</span>
<span class="token function">yarn</span> <span class="token function">install</span>

<span class="token comment"># 启动服务</span>
<span class="token function">npm</span> run front
</code></pre>
                            </div>
                            <p><img src="http://static.iocoder.cn/images/Yudao/2021-02-21/41.png?imageView2/2/format/webp/w/1280" alt="启动前端项目">
                            </p>
                            <p>② 启动完成后，浏览器会自动打开 <a href="http://localhost:1024" target="_blank"
                                                   rel="noopener noreferrer">http://localhost:1024<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>
                                地址，可以看到前端界面。</p>
                            <p><img src="https://static.iocoder.cn/images/Yudao/2022-09-04/yudao-admin-vue2-login.png?imageView2/2/format/webp/w/1280" alt="前端界面">
                            </p>
                            <h2 id="_5-启动-uni-app-管理后台"><a href="#_5-启动-uni-app-管理后台" class="header-anchor">#</a> 5. 启动 uni-app 管理后台
                            </h2>
                            <p><a href="https://github.com/YunaiV/ruoyi-vue-pro/blob/master/yudao-ui-admin-uniapp/" target="_blank"
                                  rel="noopener noreferrer"><code>yudao-ui-admin-uniapp</code><span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>
                                是前端 uni-app 管理后台项目。</p>
                            <p>〇 克隆 <a href="https://github.com/YunaiV/ruoyi-vue-pro.git" target="_blank"
                                       rel="noopener noreferrer">https://github.com/YunaiV/ruoyi-vue-pro.git<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>
                                项目，并 Star 关注下该项目。</p>
                            <p>① 下载 <a href="https://www.dcloud.io/hbuilderx.html" target="_blank"
                                       rel="noopener noreferrer">HBuilder<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>
                                工具，并进行安装。</p>
                            <p>② 点击 HBuilder 的 [文件 -&gt; 导入 -&gt; 从本地项目导入...] 菜单，选择项目的 <code>yudao-ui-admin-uniapp</code> 目录。</p>
                            <p>然后，修改 <code>config.js</code> 配置文件的 <code>baseUrl</code> 后端服务的地址为
                                <code>'http://api-dashboard.yudao.iocoder.cn</code>。如下图所示：</p>
                            <p><img src="/img/%E5%BF%AB%E9%80%9F%E5%90%AF%E5%8A%A8/%E4%BF%AE%E6%94%B9%E5%90%8E%E5%8F%B0uniapp%E7%9A%84config.png" alt="修改  配置文件的  后端服务的地址">
                            </p>
                            <p>③ 执行如下命令，安装 npm 依赖：</p>
                            <div class="language-Bash extra-class">
                  <pre class="language-bash"><code><span class="token comment"># 进入项目目录</span>
<span class="token builtin class-name">cd</span> yudao-ui-admin-uniapp

<span class="token comment"># 安装 npm 依赖</span>
<span class="token function">npm</span> i
</code></pre>
                            </div>
                            <p>④ 点击 HBuilder 的 [运行 -&gt; 运行到内置浏览器] 菜单，使用 H5 的方式运行。成功后，界面如下图所示：</p>
                            <p><img src="https://static.iocoder.cn/images/Yudao/2022-09-04/yudao-admin-uniapp-login.png?imageView2/2/format/webp/w/1280" alt="前端界面">
                            </p>
                            <div class="custom-block tip">
                                <p class="custom-block-title">友情提示：登录时，滑块验证码，在内存浏览器可能存在兼容性的问题，此时使用 Chrome 浏览器，并使用“开发者工具”，设置为 iPhone 12
                                    Pro 模式！</p>
                            </div>
                            <h2 id="_6-启动-uni-app-用户前台"><a href="#_6-启动-uni-app-用户前台" class="header-anchor">#</a> 6. 启动 uni-app 用户前台
                            </h2>
                            <p><a href="https://github.com/YunaiV/ruoyi-vue-pro/blob/master/yudao-ui-app/" target="_blank"
                                  rel="noopener noreferrer"><code>yudao-ui-app</code><span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>
                                是前端 uni-app 用户前台项目。</p>
                            <p>〇 克隆 <a href="https://github.com/YunaiV/ruoyi-vue-pro.git" target="_blank"
                                       rel="noopener noreferrer">https://github.com/YunaiV/ruoyi-vue-pro.git<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>
                                项目，并 Star 关注下该项目。</p>
                            <p>① 下载 <a href="https://www.dcloud.io/hbuilderx.html" target="_blank"
                                       rel="noopener noreferrer">HBuilder<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>
                                工具，并进行安装。</p>
                            <p>② 点击 HBuilder 的 [文件 -&gt; 导入 -&gt; 从本地项目导入...] 菜单，选择项目的 <code>yudao-ui-app</code> 目录</p>
                            <p>然后，修改 <code>config.js</code> 配置文件的 <code>baseUrl</code> 后端服务的地址为
                                <code>'http://api-dashboard.yudao.iocoder.cn/app-api</code>。如下图所示：</p>
                            <p><img src="/img/%E5%BF%AB%E9%80%9F%E5%90%AF%E5%8A%A8/%E4%BF%AE%E6%94%B9%E5%89%8D%E5%8F%B0uniapp%E7%9A%84config.png" alt="修改  配置文件的  后端服务的地址">
                            </p>
                            <p>③ 点击 HBuilder 的 [运行 -&gt; 运行到内置浏览器] 菜单，使用 H5 的方式运行。成功后，界面如下图所示：</p>
                            <p><img src="http://static.iocoder.cn/images/Yudao/2021-02-21/71.png?imageView2/2/format/webp/w/1280" alt="前端界面">
                            </p>
                            <h2 id="_7-参与项目"><a href="#_7-参与项目" class="header-anchor">#</a> 7. 参与项目</h2>
                            <p>如果你想参与到前端项目的开发，可以微信 wangwenbin-server 噢。</p>
                            <p>近期，重点开发 Vue3 管理后台、uniapp 商城，欢迎大家参与进来。</p>
                        </div>
                    </div>
                    <div class="page-slot page-slot-bottom">
                        <div class="wwads-cn wwads-horizontal pageB" data-id="136"
                             style="width:100%;max-height:80px;min-height:auto;"></div>
                        <style>
                            .pageB img {
                                width: 80px !important;
                            }

                            .wwads-horizontal .wwads-text,
                            .wwads-content .wwads-text {
                                line-height: 1;
                            }
                        </style>
                    </div>
                    <div class="page-edit">
                        <!---->
                        <!---->
                        <div class="last-updated"><span class="prefix">上次更新:</span> <span class="time">2023/04/15, 00:03:57</span>
                        </div>
                    </div>
                    <div class="page-nav-wapper">
                        <div class="page-nav-centre-wrap"><a href="/quick-start/" class="page-nav-centre page-nav-centre-prev">
                            <div class="tooltip">快速启动（适合“后端”工程师）</div>
                        </a> <a href="/api-doc/" class="page-nav-centre page-nav-centre-next">
                            <div class="tooltip">接口文档</div>
                        </a></div>
                        <div class="page-nav">
                            <p class="inner"><span class="prev">
        ←
        <a href="/quick-start/" class="prev">快速启动（适合“后端”工程师）</a></span> <span class="next"><a href="/api-doc/">接口文档</a>→
      </span></p>
                        </div>
                    </div>
                </div>
                <!---->
            </main>
        </div>
        <div class="footer">
            <div class="icons"><a href="mailto:7685413@qq.com" title="发邮件" target="_blank"
                                  class="iconfont icon-youjian"></a><a href="https://github.com/YunaiV" title="GitHub" target="_blank"
                                                                       class="iconfont icon-github"></a><a href="https://www.iocoder.cn/?yudao" title="博客" target="_blank"
                                                                                                           class="iconfont icon-erji"></a></div>
            Theme by
            <a href="https://github.com/xugaoyi/vuepress-theme-vdoing" target="_blank" title="本站主题">Vdoing</a>
            | Copyright © 2019-2023
            <span>芋道源码 | MIT License</span>
        </div>
        <div class="buttons">
            <div title="返回顶部" class="button blur go-to-top iconfont icon-fanhuidingbu" style="display:none;"></div>
            <div title="去评论" class="button blur go-to-comment iconfont icon-pinglun" style="display:none;"></div>
            <div title="主题模式" class="button blur theme-mode-but iconfont icon-zhuti">
                <ul class="select-box" style="display:none;">
                    <li class="iconfont icon-zidong">
                        跟随系统
                    </li>
                    <li class="iconfont icon-rijianmoshi">
                        浅色模式
                    </li>
                    <li class="iconfont icon-yejianmoshi">
                        深色模式
                    </li>
                    <li class="iconfont icon-yuedu">
                        阅读模式
                    </li>
                </ul>
            </div>
        </div>
        <!---->
        <!---->
        <div class="custom-html-window custom-html-window-rb" style="display:;">
            <div class="custom-wrapper"><span class="close-but">×</span>
                <div>
                    <div class="wwads-cn wwads-vertical windowRB" data-id="136" style="max-width:160px;
    min-width: auto;min-height:auto;"></div>
                    <style>
                        .windowRB {
                            padding: 0;
                        }

                        .windowRB .wwads-img {
                            margin-top: 10px;
                        }

                        .windowRB .wwads-content {
                            margin: 0 10px 10px 10px;
                        }

                        .custom-html-window-rb .close-but {
                            display: none;
                        }
                    </style>
                </div>
            </div>
        </div>
    </div>
    <div class="global-ui"></div>
</div>
<script src="/assets/js/app.4a6b2d51.js" defer></script>
<script src="/assets/js/2.8c292b5b.js" defer></script>
<script src="/assets/js/10.00e05726.js" defer></script>
</body>

</html>